<template>
	<view style="padding: 20px 0;">
		<uv-line-progress :percentage="percentage" height="8px" activeColor="rgb(216, 88, 134)" :showText="false" v-if="showLine"></uv-line-progress>
		<view class="operate" v-else>
			<uv-button text="再来一次(R)" @click="again"></uv-button>
			<uv-button text="继续(Enter)" @click="next"></uv-button>
		</view>
	</view>
</template>
<script setup>
	import { ref, watch } from 'vue';
	const showLine = ref(true);
	const emits = defineEmits(['end']);
	const props = defineProps({
		percentage: {
			type: [Number, String],
			default: 0
		}
	})
	watch(() => props.percentage, (newVal) => {
		if (newVal == 100) {
			emits('end');
			uni.$uv.sleep(200).then(res => {
				showLine.value = false;
			})
		}else {
			showLine.value = true;
		}
	})
	// 再来一次
	function again() {
		uni.$emit('reloadCourse');
	}
	// 继续
	function next() {
		uni.$emit('nextCourse');
	}
</script>